<template>
  <div class="dialog dark" v-if="showDialog">
    <div class="dialog-header"><span class="title">录音中</span></div>
    <div class="dialog-body">
      <div class="icon-wrapper"><i class="icon icon-mic"></i></div>
      <div class="text">请靠近麦克风说话，确保整体拾音效果清晰</div>
    </div>
    <div class="dialog-footer">
      <ul class="toolbar">
        <li class="item">
          <button
            class="btn btn-reliefstyle"
            type="button"
            @click="closeDialog"
          >
            <span class="text">录制完成</span>
          </button>
        </li>
        <li class="item">
          <button
            class="btn btn-reliefstyle"
            type="button"
            @click="closeDialog"
          >
            <span class="text">取消录制</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      showDialog: true,
    };
  },
  props:{
      show:{
          type:Boolean,
          default:false
      }
  },
  watch:{
      show:{
          handler(n){
              this.showDialog = n;
          }
      }
  },
  methods: {
    closeDialog() {
      this.showDialog = false;
    },
  },
};
</script>

<style scoped>

</style>